<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">


<div layout:fragment="content">
    <div class="med_tittle_section">
        <div class="med_img_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="med_tittle_cont_wrapper">
                        <div class="med_tittle_cont">
                            <ol class="breadcrumb">
                                <li><a th:href="@{/}">系统首页</a></li>
                                <li><a th:href="@{/information/pushRecruitmentListUI}">我发布的</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container">

        <div class="container">
            <div class="row med_toppadder50 med_bottompadder50">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!--                    <div align="right" style="float:right">-->
<!--                        <button type="button" id="push_recruitment" class="btn btn-default btn-warning">发布招工就业</button>-->
<!--                    </div>-->
<!--                    <h1>我发布的</h1>-->
<!--                    <br />-->
                    <div class="filter-type-box cy-tabs">
                        <ul class="nav nav-tabs mb-10">
                            <li class="active">
                            <a th:href="@{/}"><i class="fa"></i>我发布的</a></li>
                            <li class="pull-right">
                                <div class="search-tags">
                                    <div align="right" style="float:right">
                                        <button type="button" id="push_recruitment" class="btn btn-default btn-warning">发布招工就业</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div th:each="recruitmentDTO:${page.content}" class="cy-news-grid-item">
                        <div class="cy-news-thumbnail pull-left">
                            <a th:href="@{/information/recruitmentDetailsUI(id=${recruitmentDTO.id})}">
                                <img th:src="@{'/images/'+ ${recruitmentDTO.image} +'.jpg'}"  class="image_fade" alt="">
                            </a>
                        </div>
                        <div class="cy-media-body">
                            <div class="cy-grid-body">
                                <h5><a th:href="@{/information/recruitmentDetailsUI(id=${recruitmentDTO.id})}"
                                       th:text="'招聘单位 : ' + ${recruitmentDTO.address}"></a></h5>
<!--                                <small th:text="${recruitmentDTO.describe}"></small>-->
                                <div id ="editorContent"  th:utext="${recruitmentDTO.describe}" style="color: #9c9c9c;-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;"></div>
                            </div>

                            <div class="cy-btm-info">
                                <div class="cy-btm-date"></div>
                                <div class="cy-btm-tags">
                                    <a th:text="${recruitmentDTO.auditStatus}">审核状态</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div th:insert="~{base/pageable}"></div>


                    <!--编辑招工就业信息弹框-->
                    <div class="modal fade" id="exampleModal">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">发布招工就业</h4>
                                </div>
                                <div class="modal-body">
                                    <form method="post" name="insertMember"
                                          id="insertMember" class="form-horizontal" enctype="multipart/form-data">
                                        <!--隐藏的-->
<!--                                        <input type="text" id="id" name="id" hidden>-->

                                        <div id="companyDiv" class="form-group m-b-10" style="text-align:right">
                                            <label class="col-sm-2 control-label">
                                                <label style="color: red">*</label>招聘单位:
                                            </label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="company" name="company">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div id="addressDiv" class="form-group m-b-10" style="text-align:right">
                                            <label class="col-sm-2 control-label">
                                                <label style="color: red">*</label>单位地址:
                                            </label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="address" name="address">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div id="nameDiv" class="form-group m-b-10" style="text-align:right">
                                            <label class="col-sm-2 control-label">
                                                <label style="color: red">*</label>联系人:
                                            </label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="name" name="name">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div id="telephoneDiv" class="form-group m-b-10" style="text-align:right">
                                            <label class="col-sm-2 control-label">
                                                <label style="color: red">*</label>联系方式:
                                            </label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="telephone" name="telephone">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
<!--                                        <div class="form-group m-b-10" style="text-align:right">-->
<!--                                            <label class="col-sm-4 control-label">-->
<!--                                                招聘描述:-->
<!--                                            </label>-->
<!--                                            <div class="col-sm-7">-->
<!--                                                <textarea type="text" rows="7" cols="20" class="form-control" id="describe" name="describe">-->
<!--                                                </textarea>-->
<!--                                                <span class="help-block"></span>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                        <div class="form-group m-b-10">
                                            <label class="col-sm-2 control-label">招聘描述：</label>
                                            <div class="col-sm-10">
                                                <div id="addDescEditor"></div>
                                                <input type="text" name="recruitmentDesc" id="addRecruitmentDesc"
                                                       style="display: none" />
                                            </div>
                                        </div>
                                        <div id="imageDiv" class="form-group m-b-10" style="text-align:right">
                                            <label class="col-sm-2 control-label">
                                                上传图片:
                                            </label>
                                            <div class="col-sm-6">
                                                <input type="file" id="file" name="file" onchange="uploadFile()" th:attr="testName='example'">
<!--                                                <button type="button" id="uploadFile" value="确认" th:attr="uploadFileName='example'">确认</button>-->
                                                <img id="imagePosition" style="width: 100px !important; display: inherit">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                                    <button type="button" class="btn btn-info" onclick="saveForm()">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery_min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/wow.min.js}"></script>
    <script th:src="@{/js/custom.js}"></script>
    <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
    <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <!--富文本编辑框js-->
    <script th:src="@{/js2/wangEditor.js}"></script>
    <script th:inline="javascript">
        function cancelTravelStrategyReserve(id) {
            $.ajax({
                url: '/travel/strategy/cancelTravelStrategyReserve',
                data: {"id": id},
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    if (result.code === 200) {
                        window.location.reload();
                    } else {
                        layer.open({
                            title: '错误提示',
                            content: result.message
                        });
                    }
                }
            })
        }

        function aaa(message) {
            alert(message);
        }

        // 触发招工就业发布框
        $(document).on("click", "#push_recruitment", function () {
            //限制富文本编辑器在模态框中的显示
            var E = window.wangEditor;
            var editor = new E('#addDescEditor');
            editor.customConfig.zIndex = 100;
            editor.customConfig.onchange = function(html) {
                // 监控变化，同步更新到 textarea
                textArea = html;
                $("#addDescEditor").val(html);
                $("#addRecruitmentDesc").val(html);
            }
            editor.create();
            //初始化显示内容
            editor.txt.html("<h1>欢迎编辑，请输入文字...</h1>");
            reset_form("#exampleModal form");
            // 显示模态框
            $("#exampleModal").modal({
                backdrop: "static"
            });
        });

        // 点击提交表单，包括information_recruitment
        function saveForm() {
            //name
            var company = $('#company').val();
            var address = $('#address').val();
            var name = $('#name').val();
            var telephone = $('#telephone').val();
            var describe = $('#addRecruitmentDesc').val();
            var image = $("#file").attr("testName");
            console.log(image);

            // const file = $("#imageFile")[0].files[0];
            // var formData = new FormData();
            // formData.append("company", company);
            // formData.append("address", address);
            // formData.append("name", name);
            // formData.append("telephone", telephone);
            // formData.append("describe", describe);

            // var formData = $("#exampleModal form").serialize();
            // formData.append("imageFile", $("#imageFile")[0].files[0]);

            if (company.length === 0) {
                show_validate_msg("#company",
                    "error", "招聘单位不能为空");
                return false;
            }
            if (address.length === 0) {
                show_validate_msg("#address",
                    "error", "单位地址不能为空");
                return false;
            }
            if (name.length === 0) {
                show_validate_msg("#name",
                    "error", "联系人不能为空");
                return false;
            }
            if (telephone.length === 0) {
                show_validate_msg("#telephone",
                    "error", "联系方式不能为空");
                return false;
            }
            $.ajax({
                url: '/platform/information/addRecruitment',
                // data: $("#exampleModal form").serialize(),
                data: {
                    "company":company,
                    "address":address,
                    "name":name,
                    "telephone":telephone,
                    "describe":describe,
                    "image": image
                    // "file": file
                },
                // data: formData,
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    if (result.code === 100) {
                        $("#exampleModal").modal('hide');
                        window.alert('招工就业信息提交成功！');
                        setTimeout(function () {
                            location.href = "/platform/information/pushRecruitmentListUI";
                        }, 1000);
                    } else {
                        layer.open({
                            title: '招工就业信息提交失败！',
                            content: result.message
                        });
                        // window.alert('招工就业信息提交失败！');
                    }
                }
            })
        }
        // // 文件确认提交
        // $(document).on("click", "#uploadFile", function () {
        // // function uploadFile(){
        // //     var file = $("#file")[0].files[0];
        //     var file = $("#file")[0].files[0];
        //     var formData = new FormData();
        //     formData.append("file", file);
        //     // $("#imagePosition").attr("src", "/platform/images/" + file.name);
        //     $("#uploadFile").attr("uploadFileName", file.name.substring(0, file.name.indexOf(".")));
        //     // console.log($("#uploadFile").attr("uploadFileName"));
        // $.ajax({
        //     url: '/platform/information/uploadFile',
        //     type: 'post',
        //     data: formData,
        //     processData: false,
        //     contentType: false,
        //     cache: false,
        //     success:function (result){
        //         if (result.code === 100) {
        //             window.alert("提交成功");
        //             $("#imagePosition").attr("src", "/platform/images/" + file.name);
        //         }else {
        //             window.alert("提交失败");
        //         }
        //     }
        // })
        // });

        // 选择文件后提交
        function uploadFile(){
            var file = $("#file")[0].files[0];
            var formData = new FormData();
            formData.append("file", file);
            $("#file").attr("testName", file.name.substring(0, file.name.indexOf(".")));
            console.log($("#file").attr("testName"));
            $.ajax({
                url: '/platform/information/uploadFile',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success:function (result){
                    if (result.code === 100) {
                        window.alert("图片提交成功");
                        $("#imagePosition").attr("src", "/platform/images/" + file.name);
                    }else {
                        window.alert("图片提交失败");
                    }
                }
            })
        }
        // function reset() {
        //     //全部清空
        //     $('#exampleModalLabel').text('发布招工就业');
        //     //id
        //     $('#id').val('');
        //     //name
        //     $('#title').val('');
        //     //describe
        //     $('#describe').val('');
        //     //显示模态框
        //     $('#exampleModal').modal('show')
        //
        // }

        //清空表单样式及内容
        function reset_form(ele) {
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

        //显示校验结果的提示信息
        function show_validate_msg(ele, status, msg) {
            //清除当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if ("success" === status) {
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            } else if ("error" === status) {
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }



        $('.filter-type-box span a').click(function () {
            if ($(this).hasClass('active'))
                $(this).removeClass('active')
            else
                $(this).addClass('active')
        });
        $('.cy-summary-intro p').each(function () {
            var maxwidth = 260;
            var backup = $(this).html();
            var height_lg = $(this).parent().height();
            if ($(this).text().length > maxwidth) {
                $(this).text($(this).text().substring(0, maxwidth));
                $(this).html($(this).html() + '...');
                var backup_1 = $(this).html();
                var height_sm = $(this).parent().height();
                $(this).parent().css('height', height_sm);
            }
            var d_value = height_lg - height_sm;
            // $(this).next().click(function () {
            //     if ($(this).html() == '更多') {
            //         $(this).html('收起');
            //         $(this).prev().html(backup);
            //         $(this).parent().animate({height: '+=' + d_value + 'px'});
            //     } else {
            //         $(this).html('更多');
            //         $(this).prev().html(backup_1);
            //         $(this).parent().animate({height: '-=' + d_value + 'px'});
            //     }
            // })
        });

    </script>
</div>
</html>
